<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Windoo usage template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css" media="all">
	/* include common CSS file */
    @import url(themes/windoo.css);

	/* include theme-specific CSS files */
    @import url(themes/windoo.aero.css);
    @import url(themes/windoo.alphacube.css);
    @import url(themes/windoo.aqua.css);

    body {
    	background:#fff;
    }

	/* custom CSS code */
	#win2 {
		width:300px;
		height:150px;
		border:solid red 1px;
		margin:3em 0 0 2em;
		padding:.5em;
		overflow:hidden;
    	font-size:12px;
	}
	#win2 p {
		margin:0;
		padding:0;
	}
</style>

<!--  !!! Include IE-only CSS for Windoo Aqua theme !!! -->
<!--[if IE]><link rel="stylesheet" type="text/css" href="themes/windoo.aqua.ie.css" media="screen,handheld" /><!{endif]-->

<!--  Include javascript libraries  -->
<script src="js/mootools-release-1.11.js" type="text/javascript" charset="utf-8"></script>
<script src="js/windoo.r114.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">//<![CDATA[

//** Create windows on page load
window.addEvent('domready', function(){

	//** Window 1: positioned window with content adopted from existing DOM element
	var win1 = $('win1'), container1 = win1.getParent();
	win1.remove();

	var panel = new Element('div', {'styles': {'padding-top': 10, 'text-align': 'right'}}).adopt(
		new Element('input', {'type': 'button', 'value': '<< Back'}),
		new Element('input', {'type': 'button', 'value': 'Forward >>'})
	);
	var windoo1 = new Windoo({
		left: 600,
		top: 10,
		title: 'Window with buttons panel',
		//positionStyle: 'fixed', // NOTE: not functional if container defined
		container: container1,
		resizeLimit: {'x':[270], 'y':[200]},
		theme: Windoo.Themes.aero,
		position: false
	}).addPanel(panel).adopt(win1).show();

	//** Window 2: window wrapped around the element
	$('wrap-window').addEvent('click', function(ev){
		new Event(ev).stop();
		this.disabled = true;
		new Windoo({
			//ghost: {resize: true, move: true},
			buttons: {roll: true},
			title: 'Wrapped element'
		}).wrap($('win2'), {
			position: true,			// inherit content position
			ignorePadding: false,	// = add window border padding to content block size
			resetWidth: true
		}).show();
	});

	//** Window 3: centered iframe window
	new Windoo({
		width: 640,
		height: 480,
		title: 'IFrame window',
		type: 'iframe',
		shadow: false,
		container: false,
		buttons: {menu: true},
		ghost: {resize: true, move: true},
		url: 'http://mootools.net',

		onBeforeClose: function(){
			this.preventClose( !confirm('Have you already visited mootools.net?') );
		}
	}).show();

	//** move windoo1 on top
	windoo1.bringTop();

	$('alert-dialog').addEvent('click', function(ev){
		//** Window 4: display Alert dialog window
		new Windoo.Alert("<p><strong>Welcome to Windoo</strong>:<br/>a Mootools extension for creating inline windows</p>", {
			'window': {
				'theme': Windoo.Themes.aqua,
				'onClose': function(){
					alert('alert dialog closed');
				}
			}
		});
	});

	$('confirm-dialog').addEvent('click', function(ev){
		//** Window 5: display Confirm dialog window with callbacks
		new Windoo.Confirm("<strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</strong> Donec fermentum erat nec felis. Cras suscipit enim sit amet velit. Suspendisse commodo ultricies quam. Nulla elementum tristique risus. Ut ultrices lorem et nisi. Mauris eget felis eu lacus ornare viverra. Aliquam non nulla. Suspendisse potenti. Integer congue. Curabitur placerat pharetra nulla. Nam tristique laoreet libero. Suspendisse neque. Pellentesque posuere ullamcorper enim. In hac habitasse platea dictumst. Nam nonummy consequat ligula. Maecenas commodo lacus ut purus. Etiam rutrum velit nec tellus. Praesent sit amet urna in odio pulvinar gravida. Integer pede. Sed orci.", {
			'window': {
				'resizable': true
			},
			'onConfirm': function(){
				alert('OK selected');
			},
			'onCancel': function(){
				alert('Cancel selected');
			}
		});
	});

});

//]]></script>
</head>
<body>

<h1>Windoo: Mootools window class</h1>
<blockquote>
	<p>Windoo demonstration and template usage page</p>
	<p>Visit <a href="http://code.google.com/p/windoo/">project home page</a>.</p>
</blockquote>

<h2>Windoo.Dialog component usage demonstration</h2>
<p>
	<input id="alert-dialog" title="Create inline modal alert dialog window" value="Create Windoo.Alert" type="button" />
	<input id="confirm-dialog" title="Create inline modal confirm dialog window" value="Create Windoo.Confirm" type="button" />
</p>

<h2>Windoo::wrap function usage demonstration</h2>
<p>
	<input id="wrap-window" value="Wrap content into window" type="button" />
</p>

<!-- Window 1 content -->
<div id="win1">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fermentum erat nec felis. Cras suscipit enim sit amet velit. Suspendisse commodo ultricies quam. Nulla elementum tristique risus. Ut ultrices lorem et nisi. Mauris eget felis eu lacus ornare viverra. Aliquam non nulla. Suspendisse potenti. Integer congue. Curabitur placerat pharetra nulla. Nam tristique laoreet libero. Suspendisse neque. Pellentesque posuere ullamcorper enim. In hac habitasse platea dictumst. Nam nonummy consequat ligula. Maecenas commodo lacus ut purus. Etiam rutrum velit nec tellus. Praesent sit amet urna in odio pulvinar gravida. Integer pede. Sed orci.</p>
	<p>Nulla turpis leo, dictum vitae, auctor posuere, molestie eu, nisi. Donec urna erat, auctor ac, sodales non, auctor ut, nunc. Phasellus ac purus. Ut porta. Curabitur neque augue, dictum id, ultrices imperdiet, fermentum nec, nulla. Maecenas tempor, dolor ut ultricies congue, diam purus gravida eros, sit amet cursus dolor diam ut justo. Nullam ut nisl eget erat ultrices imperdiet. Sed convallis. Phasellus viverra. Integer mi mauris, pharetra vitae, tincidunt eu, imperdiet at, lectus. Sed consequat, ante in mollis adipiscing, arcu lectus euismod orci, ut viverra diam diam eget dolor. Suspendisse urna. Ut vitae magna in arcu dignissim consectetuer. Praesent laoreet. Sed at enim. Mauris elit velit, consequat vel, hendrerit at, dictum nec, metus. Aliquam pharetra. Mauris aliquam pulvinar metus. Curabitur luctus tellus quis neque. Fusce interdum tortor sit amet sapien consequat porta.</p>
</div>

<!-- Window 2 content -->
<div id="win2">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fermentum erat nec felis. Cras suscipit enim sit amet velit. Suspendisse commodo ultricies quam. Nulla elementum tristique risus. Ut ultrices lorem et nisi. Mauris eget felis eu lacus ornare viverra. Aliquam non nulla. Suspendisse potenti. Integer congue. Curabitur placerat pharetra nulla. Nam tristique laoreet libero.</p>
</div>

</body>
</html>